﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> jQuery  基本 输入控件的 处理机制  </title>
    

    <!--  这个是 基本的 jQuery 的 js.  -->
    <script src="../Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>



    <!--  这个是 用于提供 placeholder 功能的 js.  -->
    <script src="../Scripts/jquery.placeholder.1.3.min.js" type="text/javascript"></script>



    <script type="text/javascript">


        $(document).ready(function () {


            // placeholder 功能的， 只需要初始化一次即可.
            $.Placeholder.init();


            // -------------------- Text --------------------

            // 测试读取 Text  点击处理事件.
            $("#btnTestReadText").click(function () {

                // 取得用户输入.
                // $("#txtTest")  为获取画面上的 id = txtTest 的对象.
                // val() 为 获取对象上的数据.
                var vText = $("#txtTest").val();

                var vPlaceholder = $("#txtTest").attr("placeholder");

                if (vText != vPlaceholder) {
                    alert("Input Text 上输入的信息为：" + vText);
                } else {
                    alert("Input Text 上，用户还没有输入信息！");
                }
            });



            // 测试写入 Text  点击处理事件.
            $("#btnTestWriteText").click(function () {

                // $("#txtTest")  为获取画面上的 id = txtTest 的对象.
                // val( "测试写入数据" ) 为 修改对象上的数据.
                $("#txtTest").val("测试写入数据");

            });

            // -------------------- Text --------------------







            // -------------------- Checkbox --------------------

            $(":checkbox[name='chkABCD']").change(function () {
                // 取得用户输入.
                var vUserSelectVal = $(this).val();
                if ($(this).attr("checked") == "checked") {
                    $("#checkResult").html("用户选择了：" + vUserSelectVal);
                } else {
                    $("#checkResult").html("用户取消了：" + vUserSelectVal);
                }


                // 新追加：
                // 设置 已选择 chkResult 数据部分.
                if ($(this).attr("checked") == "checked") {
                    // 用户选择了.
                    $("#chkResultUl").append("<li code='" + vUserSelectVal + "'>" + vUserSelectVal + "</li>");
                } else {
                    // 用户取消了
                    $("#chkResultUl").children().each(function () {
                        if ($(this).attr("code") == vUserSelectVal) {
                            $(this).remove();
                        }
                    });
                }

            });



            // 强制全部选择.
            $("#chkAll").change(function () {
                if ($(this).attr("checked") == "checked") {
                    $("input[name='chkABCD']").each(function (index) {
                        // 设置 checkbox 的选择.
                        $(this).attr("checked", "checked");
                        // 锁定，不允许修改
                        $(this).attr("disabled", "disabled");
                    });
                } else {
                    $("input[name='chkABCD']").each(function (index) {
                        // 取消锁定，允许修改
                        $(this).removeAttr("disabled");
                    });
                }
            });



            // 全选  点击处理事件.
            $("#btnTestSelectAllCheckbox").click(function () {
                // 遍历画面中的 每一个 名称为 chkABCD 的元素.
                $("input[name='chkABCD']").each(function (index) {
                    // 设置 checkbox 的选择.
                    $(this).attr("checked", "checked");
                });
            });


            // 全取消  点击处理事件.
            $("#btnTestSelectNoneCheckbox").click(function () {
                // 遍历画面中的 每一个 
                // 名称为 chkABCD 的元素 :  input[name='chkABCD']
                // [checked] 表示 筛选那些  已经 选择了的.
                $("input[name='chkABCD'][checked]").each(function (index) {
                    // 取消 checkbox 的选择.
                    $(this).removeAttr("checked");
                });
            });


            // 测试读取 CheckBox 点击处理事件
            $("#btnTestReadCheckBox").click(function () {
                // 用字符串存储选择的项目.
                var vCheckBoxVal = "";
                // 遍历已选择的数据的时候，传入一个参数.
                $("input[name='chkABCD'][checked]").each(function (index) {
                    vCheckBoxVal = vCheckBoxVal + $(this).val() + " ";
                });
                alert("Input CheckBox 上输入的信息为：" + vCheckBoxVal);
            });


            // 测试读取 CheckBox 点击处理事件
            $("#btnTestReadCheckBox2").click(function () {
                // 用数组存储选择的项目.
                var arr = new Array();
                // 遍历已选择的数据的时候， 传入2个参数.
                $("input[name='chkABCD'][checked]").each(function (key, value) {
                    // 因为传递进来2个参数， 已经包含了索引和数值.
                    // 这种情况下， 不需要使用 $(this) 了.
                    arr[key] = $(value).val();
                });
                alert("一共选择了" + arr.length + "项:" + arr.join(","));
            });


            // 测试写入 CheckBox 点击处理事件
            $("#btnTestWriteCheckBox").click(function () {

                // 遍历画面中的 每一个 名称为 chkABCD 的元素.
                $("input[name='chkABCD']").each(function (index) {

                    if ($(this).val() == "A" || $(this).val() == "C") {
                        // 设置 checkbox 的选择.
                        $(this).attr("checked", "checked");
                    } else {
                        // 取消 checkbox 的选择.
                        $(this).removeAttr("checked");
                    }

                });

            });



            // -------------------- Checkbox --------------------







            // -------------------- Radio --------------------


            $(":radio[name='rdoABCD']").change(function () {
                // 取得用户输入.
                var vUserSelectVal = $(this).val();
                $("#radioResult").html("用户选择了：" + vUserSelectVal);
            });


            // 测试读取 Radio  点击处理事件.
            $("#btnTestReadRadio").click(function () {

                // 取得用户输入.
                var vUserSelectVal = "";

                // 遍历画面中的 每一个 名称为 rdoABCD 的元素.
                $("input[name='rdoABCD']").each(function (index) {
                    if ($(this).attr("checked") == "checked") {
                        // 本 Radio 被选择了.
                        vUserSelectVal = $(this).val();
                    }
                });

                if (vUserSelectVal == "") {
                    alert("Input Radio 上还没有输入信息！");
                } else {
                    alert("Input Radio 上输入的信息为：" + vUserSelectVal);
                }
            });



            // 测试写入 Radio  点击处理事件.
            $("#btnTestWriteRadio").click(function () {

                // 遍历画面中的 每一个 名称为 rdoABCD 的元素.
                $("input[name='rdoABCD']").each(function (index) {

                    if ($(this).val() == "C") {
                        // 如果是 C ， 那么选择.
                        $(this).attr("checked", "checked");
                    } else {
                        // 其他的，取消选择.
                        $(this).removeAttr("checked");
                    }
                });

            });



            // -------------------- Radio --------------------






            // -------------------- Select --------------------


            // 测试 Select 选择发生变化处理事件.
            $("#cboABCD").change(function () {
                // 选择的文本.
                var vSelectText = $(this).find('option:selected').text();

                // 选择的 Value.
                var vSelectValue = $(this).val();

                $("#selectResult").html("Select 选择的文本为：" + vSelectText + " Value为:" + vSelectValue);
            });



            // 测试读取 Select  点击处理事件.
            $("#btnTestReadSelect").click(function () {

                // 选择的文本.
                var vSelectText = $("#cboABCD").find('option:selected').text();

                // 选择的 Value.
                var vSelectValue = $("#cboABCD").val();


                alert("Select 选择的文本为：" + vSelectText + " Value为:" + vSelectValue);
            });



            // 测试写入 Select  点击处理事件.
            $("#btnTestWriteSelect").click(function () {

                $("#cboABCD option").each(function (index) {
                    if ($(this).val() == "C") {
                        // 如果是 C ， 那么选择.
                        $(this).attr("selected", "selected");
                    } else {
                        // 其他的，取消选择.
                        $(this).removeAttr("selected");
                    }
                });

            });


            // 测试清除 Select
            $("#btnTestClearSelect").click(function () {
                $("#cboABCD option").each(function (index) {
                    $(this).remove();
                });
            });

            // 测试初始化 Select
            $("#btnTestInitSelect").click(function () {
                $("#cboABCD").append('<option value="A" selected="selected">A1</option>');
                $("#cboABCD").append('<option value="B">B2</option>');
                $("#cboABCD").append('<option value="C">C3</option>');
                $("#cboABCD").append('<option value="D">D4</option>');
            });


            // -------------------- Select --------------------












            // -------------------- Select (复选) --------------------



            // 测试读取 Select  点击处理事件.
            $("#btnTestReadSelectMul").click(function () {

                // 选择的文本.
                var vSelectText = $("#lstABCD").find('option:selected').text();

                // 选择的 Value.
                var vSelectValue = $("#lstABCD").val();


                alert("Select 选择的文本为：" + vSelectText + " Value为:" + vSelectValue);
            });



            // 测试写入 Select  点击处理事件.
            $("#btnTestWriteSelectMul").click(function () {

                $("#lstABCD option").each(function (index) {
                    if ($(this).val() == "A" || $(this).val() == "C") {
                        // 如果是 A 或 C ， 那么选择.
                        $(this).attr("selected", "selected");
                    } else {
                        // 其他的，取消选择.
                        $(this).removeAttr("selected");
                    }
                });

            });



            // -------------------- Select (复选)  --------------------

        })
        
    </script>

</head>



<body>



<form id="form1" action="#">
     

  <h4> Text </h4>
  
  <table>
    <tr>
      <td> 
          <input id="txtTest" type="text" value="" title="这里输入一个文本信息!" placeholder="这里输入姓名或者昵称！"/> 
      </td>

      <td>
          <input id="btnTestReadText" type="button" value="测试读取 Text " />
      </td>

      <td>
          <input id="btnTestWriteText" type="button" value="测试写入 Text " />
      </td>
    </tr>
  </table>



  <h4> Checkbox </h4>


  <ul id="chkResultUl">

  </ul>


  <table>

    <tr>
      <td> A 
          <input id="chkA" name="chkABCD" type="checkbox"  value="A" 
              checked="checked" title="选择A" /> </td>
      <td> B <input id="chkB" name="chkABCD" type="checkbox"  value="B" title="选择B" /> </td>
      <td> C <input id="chkC" name="chkABCD" type="checkbox"  value="C" title="选择C" /> </td>
      <td> D <input id="chkD" name="chkABCD" type="checkbox"  value="D" 
              checked="checked" title="选择D" /> </td>
    </tr>

	<tr>
	  <td id="checkResult"  colspan="4">
	    
	  </td>
	</tr>	
	
    <tr>
      <td colspan="2">
          <input id="btnTestSelectAllCheckbox" type="button" value="全选" />
      </td>

      <td colspan="2">
          <input id="btnTestSelectNoneCheckbox" type="button" value="全取消" />
      </td>
    </tr>

    <tr>
      <td colspan="4">
          强制全部选择 <input id="chkAll" type="checkbox"  title="强制全部选择" />
      </td>
    </tr>

    <tr>
	  <td>
	    <input id="btnTestReadCheckBox" type="button" value="测试读取" />
	  </td>
      <td>
        <input id="btnTestReadCheckBox2" type="button" value="测试读取2" />
      </td>

      <td colspan="2">
          <input id="btnTestWriteCheckBox" type="button" value="测试写入 = A,C" />
      </td>
    </tr>

  </table>




  <h4> Radio </h4>

  
  <table>

    <tr>
      <td> A <input id="rdoA" name="rdoABCD" type="radio"  value="A" title="选择A" /> </td>
      <td> B <input id="rdoB" name="rdoABCD" type="radio"  value="B" title="选择B" /> </td>
      <td> C <input id="rdoC" name="rdoABCD" type="radio"  value="C" title="选择C" /> </td>
      <td> D <input id="rdoD" name="rdoABCD" type="radio"  value="D" title="选择D" /> </td>
    </tr>
    
	<tr>
	  <td id="radioResult"  colspan="4">
	    
	  </td>
	</tr>
	
    <tr>
      <td colspan="2">
          <input id="btnTestReadRadio" type="button" value="测试读取 Radio" />
      </td>

      <td colspan="2">
          <input id="btnTestWriteRadio" type="button" value="测试写入 Radio = C" />
      </td>

    </tr>

  </table>





  
  <h4> Select </h4>


  <table>
    <tr>
      <td>
          <select id="cboABCD">
              <option value="A" selected="selected">A1</option>
              <option value="B">B2</option>
              <option value="C">C3</option>
              <option value="D">D4</option>
          </select>
      </td>

	  <td id="selectResult">
	    
	  </td>
	  
    </tr>
	
	
  
    <tr>
      <td>
        <input id="btnTestReadSelect" type="button" value="测试读取 Select" />
      </td>

      <td>
        <input id="btnTestWriteSelect" type="button" value="测试写入 Select = C" />
      </td>
    </tr>

    <tr>
      <td>
        <input id="btnTestClearSelect" type="button" value="测试清除 Select" />
      </td>

      <td>
        <input id="btnTestInitSelect" type="button" value="测试初始化 Select" />
      </td>
    </tr>

  </table>




 
  <h4> Select ( Mul ) </h4>


  <table>
    <tr>
      <td colspan="2">
          <select id="lstABCD" multiple="multiple">
              <option value="A" selected="selected">A1</option>
              <option value="B">B2</option>
              <option value="C">C3</option>
              <option value="D" selected="selected">D4</option>
          </select>
      </td>
    </tr>
  
    <tr>
      <td>
        <input id="btnTestReadSelectMul" type="button" value="测试读取 Select" />
      </td>

      <td>
        <input id="btnTestWriteSelectMul" type="button" value="测试写入 Select = A,C" />
      </td>
    </tr>
  </table>





<input id="Submit1" type="submit" value="测算提交" />



</form>


</body>



</html>
